<template>
  <div style="height: 400px">
    <Form
      ref="formDynamic"
      :model="formDynamic"
      :label-width="70"
      style="margin-left: 30px; margin-top: 30px"
    >
      <FormItem
        v-for="(item, index) in formDynamic.items"
        :key="index"
        :label="'项目 ' + item.index"
        :prop="'items.' + index + '.value'"
      >
        <Row>
          <Col span="6">
            <Select v-model="item.type" style="width: 90%">
              <Option
                v-for="option in itemTypeList"
                :value="option.value"
                :key="option.value"
                >{{ option.label }}</Option
              >
            </Select>
          </Col>
          <Col span="12">
            <Input
              type="text"
              v-model="item.value"
              placeholder="请输入或上传需绑定的资源..."
              style="width: 95%"
              :readonly="item.type == 'text' ? false : true"
            ></Input>
          </Col>
          <Col span="3">
            <Upload
              :disabled="item.type == 'text'"
              type="select"
              :before-upload="gatherFile"
              action="-"
            >
              <Button :disabled="item.type == 'text'" @click="uploadRes(index)"
                >上传</Button
              >
            </Upload>
          </Col>
          <Col span="3">
            <Button @click="handleRemove(index)">删除</Button>
          </Col>
        </Row>
      </FormItem>
      <FormItem>
        <Row>
          <Col span="12">
            <Button type="dashed" long @click="handleAdd" icon="md-add"
              >Add item</Button
            >
          </Col>
          <Col span="12">
            <Button
              @click="handleReset('formDynamic')"
              style="margin-left: 15px"
              >Reset</Button
            >
          </Col>
        </Row>
      </FormItem>
    </Form>
  </div>
</template>

<script>
import { get, post, del, put } from "@/axios";
export default {
  props: ["userInfo", "formValidate"],
  data() {
    return {
      index: 1,
      classId: "",
      formDynamic: {
        items: [
          {
            value: "",
            file: null,
            type: "text",
            index: 1,
          },
        ],
      },
      itemTypeList: [
        {
          value: "ppt",
          label: "幻灯片(请使用PDF格式)",
        },
        {
          value: "textFile",
          label: "文本(上传文件)",
        },
        // {
        //   value: "md",
        //   label: "markdown",
        // },
        {
          value: "video",
          label: "视频",
        },
        {
          value: "pdf",
          label: "PDF",
        },
        {
          value: "text",
          label: "文本",
        },
        // {
        //   value: "model",
        //   label: "模型",
        // },
      ],
    };
  },
  mounted() {
    this.classId = window.location.href
      .split("/classInfo?id=")[1]
      .split("&content")[0];
    // console.log(this.$emit("createSuccess"));
  },
  methods: {
    handleReset(name) {
      this.$refs[name].resetFields();
    },
    handleAdd() {
      if (this.index <= 4) {
        this.index++;
        this.formDynamic.items.push({
          value: "",
          file: null,
          type: "text",
          index: this.index,
        });
      } else {
        this.$Message.info("最多添加5个内容");
      }
    },
    uploadRes(index) {
      this.index = index;
    },
    gatherFile(file) {
      this.formDynamic.items[this.index].file = file;
      this.formDynamic.items[this.index].value = file.name;
      return false;
    },
    handleRemove(index) {
      this.formDynamic.items.splice(index, 1);
    },
    async createTask() {
      let formData = new FormData();
      let toUploadText = "";
      // console.log(this.formDynamic.items);
      for (let i = 0; i < this.formDynamic.items.length; i++) {
        if (this.formDynamic.items[i].type == "text") {
          toUploadText =
            toUploadText +
            this.formDynamic.items[i].index +
            "-$-" +
            this.formDynamic.items[i].value +
            "__" +
            this.classId +
            "__";
        } else {
          formData.append("files", this.formDynamic.items[i].file);
        }
      }
      formData.append("classId", this.classId);
      formData.append("type", this.formValidate.type);
      formData.append("name", this.formValidate.name);
      formData.append("description", this.formValidate.description);
      formData.append("state", this.formValidate.state);
      formData.append("texts", toUploadText);
      formData.append("timeRange", this.formValidate.timeRange);
      formData.append("createFolder", this.formValidate.createFolder);
      formData.append("importance", this.formValidate.importance);
      try {
        let res = await post("/visualResourceLibrary/class/task", formData);
        // console.log(res);
        this.$Message.success("创建成功");
        this.$emit("createSuccess",res.data.data);
      } catch (e) {
        this.$Message.error("修改失败");
        console.log(e);
      }
    },
  },
};
</script>

<style>
</style>